<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>列表照片练习</title>
    <!-- <link rel="stylesheet" href="style.css"> -->
    <style>
      /* h1, .red {
        font-size: 5px;
      } */
      /* .red.big{
        font-size: 20px;
      } */

      /* * {
        background-color: cadetblue;
      } */
      /* h1 {
        color: aqua;
      }
      p {
        font-size: 10px;
      }

      .red {
        color: red;
      }

      .big {
        font-size: 20px;
      } */

      /* #p1,#p3 {
        color: red;
      } */
      /* img[alt] {
        width: 100px;
      } */

      /* a[href="javascript:;"]{
        font-size: 50px;
      } */
      body span {
        color: red;
      }
      ul > li:nth-child(2n+1) {
        background-color: aqua;
      }

      a:active{
        font-size: 50px;
      }
      a:visited{
        color: black;
      }
      p::before{
        content: "“";
      }
      p::after{
        content: "”";
      }
      p::first-letter{
        font-size: 30px;
      }
    </style>
  </head>

  <body>
    <p>单独的第一段</p>
    <span>第一段后面的span</span>
    <p>单独的第二段</p>
    <p>
      第一个父段落
      <span
        >第一个span
        <span>第一个span中的span</span>
      </span>
      <span>第二个span</span>
    </p>
    <span>单独的span</span>

    <h1>鸟类照片</h1>
    <h2><a href="javascript:;">鸟的网站</a></h2>
    <ul>
      <li>
        <img src="./img/favorite-1_th.jpg" alt="鸟" />
        <p id="p1" class="red big">
          一只体型小巧的鸟，羽毛蓝绿色，爪黑白相间，黑色的喙细且锋利。
        </p>
      </li>

      <li>
        <img src="./img/favorite-2_th.jpg" alt="鸟" />
        <p class="big">
          一只美丽的孔雀的上半身图片，它的颈上覆盖蓝色的羽毛，有浅色的喙和蓝色的冠。
        </p>
      </li>

      <li>
        <img src="./img/favorite-3_th.jpg" alt="鸟" />
        <p id="p3" class="red">
          一只大鸟的上半身图片，羽毛白色，浅色的喙细长而弯曲。
        </p>
      </li>

      <li>
        <img src="./img/favorite-4_th.jpg" alt="鸟" />
        <p>
          一只成年鹈鹕，羽毛大多为白色，背部和腹部有少许黑色羽毛，又长又直的喙呈黄色，喙的下方有一个喉囊可以暂时储存食物。
        </p>
      </li>

    </ul>
  </body>
</html>
